<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:sgaChooser="http://xmlns.jcp.org/jsf/composite/sgacomp/chooserDialogWindow"
                xmlns:sgaChooserItem="http://xmlns.jcp.org/jsf/composite/sgacomp/chooserDialogWindow/chooserItems">

    <rich:panel header="#{bundle.matchFormInfoPanelHeader}" id="matchInfoPanel" >

        <h:panelGrid columns="3" id="matchForm" >

            <h:outputLabel value="#{bundle.stadiumName}: " for="stadium" />
            <h:inputText id="stadium" value="#{match.stadiumName}" label="#{bundle.stadiumName}"
                         size="40" maxlength="40" 
                         required="true" 
                         requiredMessage="#{bundle.requiredValidationMessage}"
                         validatorMessage="#{bundle.lengthValidationMessage}" >
                <f:validateRequired />
                <f:validateLength minimum="1" maximum="40" />
                <rich:validator />
            </h:inputText>
            <rich:message for="stadium" />

            <h:outputLabel value="#{bundle.matchDate}: " for="matchDate" />
            <rich:calendar id="matchDate" showApplyButton="true" 
                           value="#{match.matchDate}" 
                           datePattern="#{matchBean.getMatchDatePattern()}" 
                           required="true" 
                           requiredMessage="#{bundle.requiredValidationMessage}" >
                <f:validateRequired />
                <rich:validator />
            </rich:calendar>
            <rich:message for="matchDate" />

            <h:outputLabel value="#{bundle.homeTeam}: " for="homeTeam" />
            <h:inputText id="homeTeam" label="#{bundle.homeTeam}" 
                         styleClass="dialogChooserActivator"
                         value="#{match.homeTeam.name}" size="40" 
                         readonly="true" required="true"
                         requiredMessage="#{bundle.requiredValidationMessage}" 
                         onclick="showChooserDialogWindow('teamChooserPanel', 'homeTeam')" >
                <f:validateRequired />
                <rich:validator />
            </h:inputText>
            <rich:message for="homeTeam" />

            <h:outputLabel value="#{bundle.awayTeam}: " for="awayTeam" />
            <h:inputText id="awayTeam" label="#{bundle.awayTeam}" 
                         styleClass="dialogChooserActivator" 
                         value="#{match.awayTeam.name}" size="40" 
                         readonly="true" required="true" 
                         requiredMessage="#{bundle.requiredValidationMessage}"
                         onclick="showChooserDialogWindow('teamChooserPanel', 'awayTeam');" >
                <f:validateRequired />
                <rich:validator />
            </h:inputText>
            <rich:message for="awayTeam" />

        </h:panelGrid>

    </rich:panel>

    <sgaChooser:chooserDialogWindow dialogChooserID="teamChooserPanel"
                                    dialogChooserTitle="#{bundle.teamChooserMatchChooseTeamTitle}" 
                                    dialogChooserItemTitle="#{bundle.teamChooserTeamItemTitle}" 
                                    rerendersIDs="homeTeam awayTeam goalsPanel" 
                                    resultListener="#{matchBean}" 
                                    filterFieldName="name" >
        <sgaChooserItem:teamChooserItem />
    </sgaChooser:chooserDialogWindow>

    <rich:panel id="goalsPanel" >

        <f:facet name="header" >
            <h:panelGroup id="goalsPanelHeader">
                <h:outputText value="#{bundle.goals}" />
                <a4j:commandButton image="/resources/icons/green-add-icon.png" 
                                   value="" 
                                   style="margin-left: 0.5em;"
                                   rendered="#{not empty match.homeTeam.name || not empty match.awayTeam.name}"
                                   execute="goalsPanelContent" render="goalsPanelContent" 
                                   action="#{goalBean.addGoal()}" />
            </h:panelGroup>
        </f:facet>

        <a4j:outputPanel id="goalsPanelContent" >

            <a4j:repeat value="#{match.goals}"  var="goal" 
                        id="goalsPanelRepeater"
                        iterationStatusVar="status" >

                <rich:panel>
                    <h:panelGrid columns="7" id="goalForm">

                        <h:outputLabel value="#{bundle.scoreTime}: " 
                                       for="goalScoreTime" />
                        <rich:inputNumberSpinner id="goalScoreTime"
                                                 label="#{bundle.scoreTime}"
                                                 value="#{goal.scoreTime}" 
                                                 inputSize="4" 
                                                 minValue="1" maxValue="150"
                                                 required="true"
                                                 requiredMessage="#{bundle.requiredValidationMessage}"
                                                 >
                            <f:validateRequired />
                            <rich:validator/>
                        </rich:inputNumberSpinner>
                        <rich:message for="goalScoreTime" />

                        <h:outputLabel value="#{bundle.scorer}: " 
                                       for="goalScorer" />
                        <h:inputText id="goalScorer" 
                                     styleClass="dialogChooserActivator"
                                     label="#{bundle.scorer}" size="40"
                                     value="#{goal.player.shirtNumber} #{goal.player.lastName}" 
                                     required="true" readonly="true" 
                                     requiredMessage="#{bundle.requiredValidationMessage}"
                                     onclick="showChooserDialogWindow('playerChooserPanel', 'player#{status.index}');" >
                            <f:validateRequired />
                            <rich:validator />
                        </h:inputText>
                        <rich:message for="goalScorer" />

                        <a4j:commandButton image="/resources/icons/Button-Remove-icon.png"
                                           value="" render="goalsPanel" execute="goalsPanelContent"
                                           action="#{goalBean.removeGoal(status.index)}" />

                    </h:panelGrid>
                </rich:panel>

            </a4j:repeat>

        </a4j:outputPanel>

    </rich:panel>

    <sgaChooser:chooserDialogWindow dialogChooserID="playerChooserPanel"
                                    dialogChooserTitle="#{bundle.playerChooserMatchChoosePlayerTitle}" 
                                    dialogChooserItemTitle="#{bundle.playerChooserPlayerItemTitle}" 
                                    rerendersIDs="goalsPanelContent" 
                                    resultListener="#{goalBean}" 
                                    filterFieldName="lastName" >
        <sgaChooserItem:playerChooserItem />
    </sgaChooser:chooserDialogWindow>

    <a4j:jsFunction name="showChooserDialogWindow"
                    action="#{matchBean.setChooserRestriction(dialogChooserManagedBean.selectedItemName)}"
                    render="#{chooserID}" execute="@form" 
                    oncomplete="#{rich:component(chooserID)}.show()" >
        <a4j:param name="chooserID" assignTo="#{chooserID}" />
        <a4j:param name="resultPropertyName" assignTo="#{dialogChooserManagedBean.selectedItemName}" />
    </a4j:jsFunction>

</ui:composition>
